<template>
	<view class="main_box">
		<view class="card_item">
			<ImgCard ref="imgRef" :showCode="true" :name="detailObj.name" :code="detailObj.code"></ImgCard>
		</view>
		<view class="user_name">
			<p>持卡人</p>
			<p>{{detailObj.cardholderName}}</p>
		</view>
		<button class="onlogout" @click="unBindingBandFun"><span>解绑</span></button>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from "vue";
	import apiAccount from '@/util/network_api/account.js'
	import ImgCard from "../myAccount/component/ImgCard.vue"
	import { onUnload, onLaunch, onLoad, onHide, onShow } from '@dcloudio/uni-app'

	onUnload(() => {
		uni.hideLoading()
	})
	onLoad((e) => {
		if (!e.id) return
		getCardDetail(e.id)
	})
	const detailObj = ref({
		"name": '',
		"type": 1,
		"code": '',
		"openingBank": "",
		"cardholderName": '',
		id: ''
	})
	const getCardDetail = (id) => {
		uni.showLoading({
			title: '加载中',
		});
		apiAccount.getBandDetail(id).then(res => {
			if (res.success) {
				detailObj.value = res.data.row
			}
			uni.hideLoading()
		})
	}
	const unBindingBandFun = () => {
		uni.showModal({
			title: '提示',
			content: '您确定要解除绑定吗？'
		}).then(res => {
			//确认
			if (res.confirm) {
				apiAccount.unBindingBand(detailObj.value.id).then(res => {
					if (res.code == 20000) {
						uni.hideLoading()
						uni.showToast({
							title: '解绑成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/pages_network/home/myAccount/bankCard'
							})
						}, 600)
					}
				})
			}
		})

	}
	onUnload(() => {
		uni.hideLoading()
	})
</script>

<style lang="scss" scoped>
	.main_box {
		background-color: #fafafa;
		padding: 32rpx;

		.user_name {
			background-color: #fff;
			padding: 24rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		:deep(.onlogout) {
			font-size: 30rpx;
			margin-top: 20vh;
			height: 80rpx;
			border-radius: 50rpx;
			line-height: 80rpx;
			width: 100%;
			color: #fff;
			background-color: #007cff;

			uni-button:after {
				border: none;
			}
		}
	}
</style>